import * as React from 'react';
import './index.scss';
import jump from 'jump.js';
import intl from '../../../../locale';

class SelfTalk extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      clickedButton: null,
    };

    this.myRef = React.createRef();
  }

  getOffsetTop = (id) => {
    const el = document.getElementById(`step-${id}`);
    return el && el.offsetTop;
  };

  scrollSmooth = (id) => {
    const offsetTop = this.getOffsetTop(id);
    if (offsetTop && offsetTop > 88) {
      jump(`#step-${id}`, {
        offset: -(Number(offsetTop) - 88),
      });
    }
  };

  scrollToMyRef = () => {
    this.myRef && this.myRef.current && this.myRef.current.scrollIntoView({ behavior: 'smooth' });
  };

  componentDidMount() {
    this.scrollToMyRef();
  }

  componentDidUpdate() {
    this.scrollToMyRef();
  }

  render() {
    const { messageType, content, onClickType1, onClickType2 } = this.props;

    return (
      <div className={'SelfTalk'} id={this.props.id} ref={this.myRef}>
        {messageType === 'MESSAGE' && <div className={'SelfTalkTypeMessage'}>{content[0]}</div>}

        {messageType === 'BUTTON' && (
          <>
            {this.state.clickedButton === 1 ? (
              <div className={'SelfTalkTypeMessage'}>
                {content[0] ===
                intl.get({
                  id: 'code-assets.Talk.SelfTalk.OneClickRepair',
                  defaultMessage: '一键修复',
                })
                  ? intl.get({
                      id: 'code-assets.Talk.SelfTalk.HelpMeFixIt',
                      defaultMessage: '助手帮我修复一下',
                    })
                  : content[0]}
              </div>
            ) : (
              <div
                className={'SelfTalkTypeButton'}
                onClick={() => {
                  onClickType1 && onClickType1();
                  this.setState({
                    clickedButton: 1,
                  });
                }}
              >
                {content[0]}
              </div>
            )}
          </>
        )}

        {messageType === 'BUTTONS' && (
          <div className={'SelfTalkTypeButtons'}>
            {this.state.clickedButton === 1 ? (
              <div className={'SelfTalkTypeMessage'}>{content[0]}</div>
            ) : (
              <>
                {this.state.clickedButton !== 2 && (
                  <div
                    className={'SelfTalkTypeButtonsItem'}
                    onClick={() => {
                      onClickType1 && onClickType1();
                      this.setState({
                        clickedButton: 1,
                      });
                    }}
                  >
                    {content[0]}
                  </div>
                )}
              </>
            )}

            {this.state.clickedButton === 2 ? (
              <div className={'SelfTalkTypeMessage'}>{content[1]}</div>
            ) : (
              <>
                {this.state.clickedButton !== 1 && (
                  <div
                    className={'SelfTalkTypeButtonsItem'}
                    onClick={() => {
                      onClickType2 && onClickType2();
                      this.setState({
                        clickedButton: 2,
                      });
                    }}
                  >
                    {content[1]}
                  </div>
                )}
              </>
            )}
          </div>
        )}
      </div>
    );
  }
}

export default SelfTalk;
